<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="/template.xhtml">
        <ui:define name="title">
            <h:outputText value="#{bundle.CreateNewMusic}"></h:outputText>
        </ui:define>
        <ui:define name="body">
            <h:panelGroup id="messagePanel" layout="block">
                <h:messages errorStyle="color: red" infoStyle="color: green" layout="table"/>
            </h:panelGroup>
            <h:form>
                <script>
                    function changeSourceFile(node){
                        uploadFile('../source_music_upload', node);
                    }
                    function changeAvatarImage(node){
                        uploadFile('../avatar_image_upload', node);
                    }
                        
                    function uploadFile(url,node) {
                        var sampleFile = node.files[0];//document.getElementById("sampleFile").files[0];
                        var formdata = new FormData();
                        formdata.append("file", sampleFile);
                        var xhr = new XMLHttpRequest();
                        xhr.open("POST",url, true);
                        xhr.send(formdata);
                        xhr.onload = function(e) {
                            if (this.status == 200) {
                                alert(this.responseText);
                            }
                        };                    

                    }   
                </script>
                <h:panelGrid columns="2">

                    <h:outputLabel value="#{bundle.Title}" for="title" />
                    <h:inputText id="title" value="#{addMusicController.music.title}" title="#{bundle.Title}" />
                    
                    <h:outputLabel value="#{bundle.Singers}" for="singers" />
                    <h:selectManyListbox value="#{addMusicController.music.singerIds}">
                        <f:selectItems value="#{addMusicController.music.selectSingerIdItems}"/>
                    </h:selectManyListbox>
                    
                    <h:outputLabel value="#{bundle.Description}" for="description" />
                    <h:inputTextarea rows="4" cols="30" id="description" value="#{addMusicController.music.description}" title="#{bundle.Description}" />

                    <h:outputLabel value="#{bundle.Category}" for="category" />
                    <h:selectOneMenu value="#{addMusicController.music.categoryId}">
                        <f:selectItem itemLabel="----" itemValue="0"/>
                        <f:selectItems value="#{addMusicController.music.selectCategoryIdItems}"/>
                    </h:selectOneMenu>

                    <h:outputLabel value="#{bundle.AvatarImage}" for="avatarImage" />
                    <input type="file" id="avatarImage" value="" onchange="changeAvatarImage(this)"/>

                    <h:outputLabel value="#{bundle.SourceFile}" for="sourceFile" />
                    <input type="file" id="sourceFile" value="" onchange="changeSourceFile(this)"/>
                </h:panelGrid>
                <br />
                <h:commandLink action="#{addMusicController.create}" value="#{bundle.Save}" />
                <br />
                <br />
                <!--<h:commandLink action="#{addMusicController.prepareList}" value="#{bundle.ShowAllMusic}" immediate="true"/>-->
                <br />
                <br />
                <h:link outcome="/index" value="#{bundle.Index}"/>
            </h:form>
        </ui:define>
    </ui:composition>

</html>
